<template>
    <div class="detail">
        <x-header :left-options="{backText: ''}">详情</x-header>
        <div class="newsMessage">
            <div class="newsTitle">{{infos.objector}}</div>
            <div class="newsTime">
               <span class="time">{{infos.create_time | formatDate}}</span><span class="poster">{{infos.user_login}}</span><span class="party">{{infos.department}}</span> 
            </div>
            <div class="newsImg1" :class="{'newsImgCenter':list.length<=4}">
              <div v-if="list.length">
                <div v-for="(item,index) in list" :key="index" :class="{'img-one':list.length === 1,'img-two':list.length === 2,'img-four':list.length === 4,'img-three': list.length === 3||list.length>4}">
                  <img  class="previewer-demo-img" :src="item.src" alt=""  @click="show(index)">
                </div>
                <div v-transfer-dom>
                  <previewer :list="list" ref="previewer" :options="options" ></previewer>
                </div>
              </div>
            </div>
            <div class="newsContent">
               {{infos.content_feedback}}
            </div>
        </div>
    </div>
</template>

<script>
import { XHeader, Previewer, TransferDom } from "vux";
import { mapGetters } from "vuex";

export default {
  directives: {
    TransferDom
  },
  components: {
    XHeader,
    Previewer
  },
  computed: {
    ...mapGetters(["helpDetail"])
  },
  created() {},
  activated() {
    this.$store.dispatch("getHelpDetail", {
      id: this.$route.params.helpid
    });
  },
  deactivated() {
    this.infos = {};
    this.list = [];
  },
  watch: {
    helpDetail(Value) {
      this.infos = Value;
      if (Value.images) {
        Value.images.forEach((item, index) => {
          this.list.push({ src: item, msrc: Value.thumbs[index] });
        });
      }
    }
  },
  data() {
    return {
      infos: {},
      // normalImg: require("./detail.png"),
      list: [],
      options: {
        getThumbBoundsFn(index) {
          // find thumbnail element
          let thumbnail = document.querySelectorAll(".previewer-demo-img")[
            index
          ];
          // get window scroll Y
          let pageYScroll =
            window.pageYOffset || document.documentElement.scrollTop;
          // optionally get horizontal scroll
          // get position of element relative to viewport
          let rect = thumbnail.getBoundingClientRect();
          // w = width
          return { x: rect.left, y: rect.top + pageYScroll, w: rect.width };
          // Good guide on how to get element coordinates:
          // http://javascript.info/tutorial/coordinates
        }
      }
    };
  },
  methods: {
    show(index) {
      this.$refs.previewer.show(index);
    }
  }
};
</script>

<style lang="less">
.detail {
  width: 100%;
  font-size: 0;
  .newsMessage {
    box-sizing: border-box;
    width: 100%;
    padding: 2.875rem 0 0;
    .newsTitle {
      padding: 1rem 0.625rem 0;
      font-size: 1.1875rem;
      color: rgb(0, 0, 0);
      font-weight: bold;
    }
    .newsTime {
      padding: 1.125rem 0.625rem 1.375rem;
      display: flex;
      .time {
        font-size: 0.875rem;
        color: rgb(153, 153, 153);
        margin-right: 2.125rem;
      }
      .poster {
        font-size: 0.875rem;
        color: rgb(153, 153, 153);
        margin-right: 1.5rem;
      }
      .party {
        font-size: 0.875rem;
        color: rgb(153, 153, 153);
      }
    }
    .newsImg1 {
      width: 100%;
      margin-bottom: 0.5rem;
      padding: 0 0.3125rem;
      .img-one {
        width: 100%;
        height: 11.1875rem;
        display: inline-block;
        overflow: hidden;
        img {
          width: 100%;
        }
      }
      .img-two {
        width: 170/16rem;
        height: 111/16rem;
        margin-right: 10/16rem;
        display: inline-block;
        overflow: hidden;
        &:last-child {
          margin-right: 0;
        }
        img {
          width: 100%;
        }
      }
      .img-four {
        width: 150/16rem;
        height: 87/16rem;
        margin-right: 10/16rem;
        margin-bottom: 10/16rem;
        display: inline-block;
        overflow: hidden;
        &:nth-child(2n) {
          margin-right: 0;
        }
        &:nth-child(3) {
          margin-bottom: 0;
        }
        &:nth-child(4) {
          margin-bottom: 0;
        }
        img {
          width: 100%;
          overflow: hidden;
        }
      }
      .img-three {
        width: 115/16rem;
        height: 80.5/16rem;
        margin-right: 10/16rem;
        margin-bottom: 10/16rem;
        display: inline-block;
        overflow: hidden;
        &:nth-child(3n) {
          margin-right: 0;
        }
        img {
          width: 100%;
        }
      }
    }
    .newsImgCenter {
      text-align: center;
    }
    .newsContent {
      font-size: 1rem;
      text-indent: 2em;
      word-break: break-all;
      color: rgb(51, 51, 51);
    }
  }
}
</style>